<template>
  <div id="userInfo">
    <div class="img-list-box">
      <showImg
        v-if="item.covers && item.covers.length >= 1"
        :img-list="item.covers"
      ></showImg>
      <div v-else class="no-img">大鹏教育</div>
    </div>
    <div class="info-right">
      <div class="right-top">
        <dl class="info-header">
          <dt>
            <el-image :src="item.user.avatar" fit="fill"></el-image>
          </dt>
          <dd>
            <span class="nike-name">
              {{ item.user.nickname }}
            </span>
            <!--学院-->
            <el-tag v-if="item.college" type="success" effect="dark">
              {{ item.college | filterName('readCollegeType') }}
            </el-tag>
            <!--审核不通过 \ 未审核 \ 定时发布中-->
            <el-tag v-if="checkState" type="success" effect="dark">
              {{ checkState }}
            </el-tag>
            <!--公开展示 \ 仅主页可见-->
            <el-tag v-else-if="item.showType" type="success" effect="dark">
              <template v-if="from === 'readMin'">{{
                item.showType | filterName('readMyDisplayRule')
              }}</template>
              <template v-else>{{
                item.showType | filterName('readDisplayRule')
              }}</template>
            </el-tag>
            <!--是否用户-->
            <el-tag v-if="item.userProperty" type="success" effect="dark">
              {{ item.userProperty | filterName('readUserAttr') }}
            </el-tag>
            <!--此处插槽，用来添加其他tag标签-->
            <slot name="infoTag"></slot
            ><el-popover
              v-if="showUp"
              v-model="visible"
              placement="bottom"
              width="180"
              trigger="manual"
            >
              <p class="pop-con" v-html="upCon"></p>
              <el-button slot="reference" @click="addPraiseSpeed('1')">
                加赞进度
              </el-button>
            </el-popover>
            <el-popover
              v-if="showUpTimeIng"
              v-model="visibleTimeIng"
              placement="bottom"
              width="180"
              trigger="manual"
            >
              <p class="pop-con" v-html="upContentIng"></p>
              <el-button slot="reference" @click="addPraiseSpeed('2')">
                限时批量加赞中
              </el-button>
            </el-popover>
            <el-popover
              v-if="showUpTime"
              v-model="visibleTime"
              placement="bottom"
              width="250"
              trigger="manual"
            >
              <p class="pop-con" v-html="upContent"></p>
              <el-button slot="reference" @click="addPraiseSpeed('3')">
                限时批量加赞
              </el-button>
            </el-popover>
          </dd>
          <dd>
            <span class="nick-code">{{ item.user.dpAccount }}</span>
            <span class="nick-code">发布时间：{{ item.publishDate }}</span>
            <span class="nick-code">创建时间：{{ item.createDate }}</span>
          </dd>
        </dl>
        <div class="info-content">
          <h3 v-html="item.title"></h3>
          <div class="con" v-html="item.content"></div>
        </div>
        <dl class="info-con">
          <dd
            v-permission="
              `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:seeDetail`
            "
          >
            <el-button type="warning" class="pc-preview" @click="toView('PC')">
              PC端预览
            </el-button>
            <el-button type="warning" @click="toView">
              移动端预览
            </el-button>
          </dd>
          <dd
            v-permission="
              `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:reason`
            "
            v-if="item.verifyRecord.manualReason"
          >
            不通过原因：
            <a href="javascript:;" @click="showReason">查看详情</a>
          </dd>
        </dl>
      </div>
      <ul class="foot-list">
        <li
          v-permission="
            `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:commentBtn`
          "
          class="pointer"
          @click="
            changeView(
              from === 'readMin'
                ? 'wh:readPubilsh:commentList'
                : 'wh:readManage:commentList'
            )
          "
        >
          评论 {{ item.commentCount }}
        </li>
        <li
          v-permission="
            `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:praiseBtn`
          "
          class="pointer"
          @click="
            changeView(
              from === 'readMin'
                ? 'wh:readPublish:praiseList'
                : 'wh:readManage:praiseList'
            )
          "
        >
          点赞 {{ item.likeCount }}
        </li>
        <!-- v-if="
            powerAry.includes(
              `system:${from === 'readMin' ? 'myRead' : 'read'}:share`
            )
          " -->
        <li
          v-permission="
            `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:share`
          "
          class="pointer"
          @click="showDialogNum('share')"
        >
          虚拟分享量 {{ item.virtualShareAmount }}
        </li>
        <li>真实分享量 {{ item.shareAmount }}</li>
        <!-- v-if="
            powerAry.includes(
              `system:${from === 'readMin' ? 'myRead' : 'read'}:read`
            )
          " -->
        <li
          v-permission="
            `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:read`
          "
          class="pointer"
          @click="showDialogNum('read')"
        >
          虚拟阅读量 {{ item.virtualPlayAmount }}
        </li>
        <li>真实阅读量 {{ item.playAmount }}</li>
        <li class="canClick" @click="getEditor">最新编辑者 {{ editor }}</li>
      </ul>
      <!--隐性标签-->
      <hideLabel
        v-permission="
          `wh:system:${from === 'readMin' ? 'myRead' : 'read'}:label`
        "
        :hideLabelObj="hideLabelObj"
        :user="item.user"
        :labels="item.labels"
        :labelList="labelList"
        :labelListTotal="labelListTotal"
        v-if="showHideLabel"
      ></hideLabel>
    </div>
    <dialogReadDetail
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
    ></dialogReadDetail>
    <dialogReadReason
      v-if="dialogReason.isShow"
      :dialog-data="dialogReason"
    ></dialogReadReason>
    <!--移动端预览-->
    <dialogQrcode
      v-if="dialogQrcodeData.isShow"
      :dialog-data="dialogQrcodeData"
    ></dialogQrcode>
    <dialogNum
      v-if="dialogNumData.isShow"
      :dialog-data="dialogNumData"
      @changeNum="changeNum"
      @changeReadNum="changeReadNum"
    ></dialogNum>
  </div>
</template>

<script>
import {
  editor,
  changeShare,
  changeRead
} from '@/api/readManagement/readPreserve.js' // 接口
import { praiseSpeed } from '@/api/common/likesAPI' // 接口
import { contentToStr } from '@utils/pubFunction'
import showImg from '@common/showImg'
import dialogReadDetail from '@component/readManagement/common/dialogReadDetail' //预览弹窗
import dialogReadReason from '@component/readManagement/common/dialogReason' //预览弹窗
import dialogQrcode from '@component/readManagement/common/dialogQrcode' //预览弹窗
import dialogNum from '@common/dialogNum' // 虚拟分享量/虚拟播放量-弹窗
import hideLabel from '@common/hideLabel/index' // 隐性标签
import {
  sysNormalDisable,
  getStatusCode,
  getDelCode
} from '@utils/dictionariesFunc'
export default {
  name: 'UserInfo',
  msg: '阅读管理-图文维护/我的发布-用户主要信息',
  components: {
    showImg,
    dialogReadDetail,
    dialogReadReason,
    dialogNum,
    hideLabel,
    dialogQrcode
  },
  props: ['item', 'index', 'from', 'powerAry', 'labelList', 'labelListTotal'], // from-"readMin"(我的发布)/"readPre"(作业维护)
  data() {
    return {
      categoryType: 13, // 1.社团 2.活动 3.作品 4.作业 5.回放视频 8.生活 13.阅读
      editor: '', // 最新编辑者
      auditStatus: '', // 审核状态
      id: '',
      dialogData: {
        isShow: false, // 默认隐藏
        params: '' // 编辑时，传递的参数
      },
      dialogReason: {
        //删除原因弹窗
        isShow: false, // 默认隐藏
        reason: '' // 编辑时，传递的参数
      },
      dialogQrcodeData: {
        isShow: false, // 默认隐藏
        linkUrl: '' // 编辑时，传递的参数
      },
      dialogNumData: {
        // 虚拟分享量/虚拟播放量
        isShow: false, // 默认隐藏
        type: '',
        num: 0,
        params: '' // 编辑时，传递的参数
      },
      upCon: '', // 加赞进度
      upContentIng: '', // 限时批量加赞中
      upContent: '', // 限时批量加赞
      visible: false, // 激活显示内容-加赞进度
      visibleTimeIng: false, // 激活显示内容-限时批量加赞中
      visibleTime: false, // 激活显示内容-限时批量加赞
      showUp: false, // 是否显示加赞进度
      showUpTimeIng: false, // 是否显示限时批量加赞中
      showUpTime: false, // 是否显示限时批量加赞
      checkState: '', //审核状态-审核不通过 \ 未审核 \ 定时发布中
      showHideLabel: false, //是否显示隐性标签
      hideLabelObj: {} //是否显示隐性标签
    }
  },
  computed: {
    listenshowUp() {
      return this.$store.state.praiseSpeed[`read_${this.from}_up_${this.index}`]
    },
    listenshowUpTime() {
      return this.$store.state.praiseSpeed[
        `read_${this.from}_UpTime_${this.index}`
      ]
    }
  },
  watch: {
    listenshowUp(newV, oldV) {
      if (newV) {
        this.showUp = true
      } else {
        this.showUp = false
      }
    },
    listenshowUpTime(newV, oldV) {
      if (newV) {
        this.showUpTime = true
      } else {
        this.showUpTime = false
      }
    }
  },
  mounted() {
    this.setShowUpBtn()
    this.id = this.item.id
    this.checkState = this.filterStatus()
    this.getLabelShowStatu()
  },
  methods: {
    /* 过滤返回内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    /*隐性标签是否显示*/
    getLabelShowStatu() {
      let isShow = this.$parent.$parent.showComment(this.item)
      // let power = this.powerAry.includes(
      //   `system:${this.from === 'readMin' ? 'myRead' : 'read'}:label`
      // )
      // this.showHideLabel = isShow && power
      this.showHideLabel = isShow
      if (this.showHideLabel) {
        //整合obj
        let {
          verifyRecord: { verifyStatus: auditStatu },
          college: collegeId,
          textContent: content,
          id: contentId,
          createDate: createDate,
          publishDate,
          showType: displayRule,
          covers: img,
          operatorId: operatorId,
          userProperty: userProperty,
          userId,
          title
        } = this.item
        let images = img ? img.join(',') : ''
        this.hideLabelObj = {
          activityId: '', //活动id
          auditStatu: auditStatu === 'PENDING' ? 'UNCHECKED' : auditStatu, //人审状态 PASS通过 / UNCHECKED未审核
          collegeId, //学院id
          content, //内容
          contentId, //内容id
          createDate, //创建时间
          publishDate, //发布时间
          displayRule, //展示规则
          images, //图片
          type: 'TEXT', //内容类型：图文/视频,可用值:TEXT,VIDEO
          operatorId, //运营人id
          userProperty: userProperty === 'USER' ? 'REALUSER' : userProperty, //马甲、用户
          userId, //发帖人id
          videoId: '', //保利威视vid
          channel: 'ARTICLE', //频道,可用值:JOB,LIFE,WORK,GROW,ACTIVITY,ARTICLE,SHORT_VIDEO,LONG_VIDEO
          title //标题
        }
        /*console.log(this.hideLabelObj)*/
      }
    },
    /*过滤返回标签*/
    filterStatus() {
      let status = this.item.publishStatus
      switch (status) {
        case 'DRAFT':
          return '草稿'
          break
        case 'REBUT':
          return '待重新提审'
          break
        case 'REJECT':
          return '审核不通过'
          break
        case 'PUBLISHING':
          return '定时发布中'
          break
        case 'PENDING':
          return '未审核'
          break
        case 'PUBLISHED': //已发布
          return ''
          break
      }
    },
    /* 判断加赞按钮显示隐藏 */
    setShowUpBtn() {
      if (this.item.robotPraise != null) {
        // 普通点赞状态
        if (this.item.robotPraise.taskList != null) {
          if (this.item.robotPraise.taskList.length > 0) {
            // 加赞进度
            this.showUp = true // 加赞进度
          }
        }
        if (
          this.item.robotPraise.executionTask != null ||
          this.item.robotPraise.unExecutionTask != null
        ) {
          if (this.item.robotPraise.executionTask.length > 0) {
            // 限时批量加赞中
            this.showUpTimeIng = true // 限时批量加赞中
          } else if (this.item.robotPraise.unExecutionTask.length > 0) {
            // 限时批量加赞
            this.showUpTime = true // 限时批量加赞
          }
        }
      }
    },
    /* 显示加赞进度 */
    async addPraiseSpeed(type) {
      let obj = {
        topicId: this.item.id,
        topicCreatedBy: this.item.userId,
        categoryType: this.categoryType
      }
      let data = await praiseSpeed(obj)
      switch (type) {
        case '1': // 加赞进度
          this.showUpCon(data.taskList, 'visible', 'upCon', '')
          break
        case '2': // 限时批量加赞中
          this.showUpCon(
            data.executionTask,
            'visibleTimeIng',
            'upContentIng',
            ''
          )
          break
        case '3': // 限时批量加赞
          this.showUpCon(
            data.unExecutionTask,
            'visibleTime',
            'upContent',
            'addDate'
          )
          break
      }
    },
    /* 设置当前显示点赞内容 */
    showUpCon(targetDate, targetVisible, targetCon, type = '') {
      let _this = this
      _this[targetCon] = ''
      this[targetVisible] = true
      let curData = targetDate
      if (curData.length > 0) {
        curData.forEach((item, index) => {
          if (index > 0) {
            _this[targetCon] += `<br/>`
          }
          _this[
            targetCon
          ] += `${item.number}/${item.total}  ${item.operateUser.nickName}`
          if (type) {
            _this[targetCon] += `--- ${item.startDate}`
          }
        })
      } else {
        _this[targetCon] = '暂无加赞进度'
      }
      setTimeout(() => {
        this[targetVisible] = false
      }, 2000)
    },
    /* 获取最新编辑者 */
    getEditor() {
      editor(this.item.id, (response) => {
        let e = response || ' -'
        this.editor = ': ' + e
      })
    },
    /* 字符串转为数组 */
    strToAry(str) {
      return str.split(',')
    },
    /* 显示详情弹窗 */
    showDetail() {
      this.dialogData.isShow = true
      this.dialogData.params = this.id
    },
    /* 预览 */
    toView(type) {
      const viewUrl = `${process.env.VUE_APP_MAIN_URL}details/operator-reading?id=${this.id}`
      if (type === 'PC') {
        window.open(viewUrl)
      } else {
        this.dialogQrcodeData.isShow = true
        this.dialogQrcodeData.linkUrl = viewUrl
      }
    },
    /* 显示不通过原因弹窗 */
    showReason() {
      this.dialogReason.isShow = true
      this.dialogReason.reason = this.item.verifyRecord.manualReason
    },
    /* 显示-虚拟分享量/虚拟播放量-弹窗 */
    showDialogNum(type) {
      if (this.item.deleteStatus === 'DELETED') return
      this.dialogNumData.type = type
      this.dialogNumData.isShow = true
    },
    /* 跳转页面 */
    changeView(name) {
      let id = this.item.id
      let from = this.from
      let query = {
        from,
        id
      }
      this.$router.push({ name, query })
    },
    /*关闭虚拟分享量/播放量弹窗*/
    closeDialog() {
      this.dialogNumData.isShow = false
      this.dialogNumData.type = ''
    },
    /* 修改虚拟分享量 */
    changeNum(n) {
      let obj = {
        amount: n
      }
      changeShare(
        this.item.id,
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.closeDialog()
          this.item.virtualShareAmount = n
          /* this.$emit('refresh')*/
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    },
    /* 修改阅读播放量 */
    changeReadNum(n) {
      let obj = {
        amount: n
      }
      changeRead(
        this.item.id,
        obj,
        (response) => {
          this.$message.success('操作成功')
          this.closeDialog()
          this.item.virtualPlayAmount = n
          /*this.$emit('refresh')*/
        },
        (response) => {
          this.$message.warning(response.message)
        }
      )
    }
  }
}
</script>

<style lang="less">
#userInfo {
  display: flex;
  justify-content: left;
  @import url('~@common/style/userInfo.less');
  .img-list-box {
    width: 285px;
    height: 270px;
    margin-right: 55px;
    flex: none;
    .no-img {
      width: 285px;
      height: 270px;
      background: #eee;
      color: #999;
      font-size: 34px;
      line-height: 270px;
      text-align: center;
      letter-spacing: 3px;
    }
  }
  .info-content {
    h3 {
      font-size: 18px;
      padding: 10px 0;
    }
  }
  dl.info-con {
    dd {
      padding-bottom: 0 !important;
      .el-button.pc-preview {
        padding: 5px 0;
        a {
          color: #fff;
          padding: 5px 10px;
          &:hover {
            color: #fff;
          }
        }
      }
    }
  }
}
</style>
